<template>
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParamsModel" :inline="true">
        <el-form-item prop="keywords" label="关键字">
          <el-input
            v-model="queryParamsModel.keywords"
            placeholder="角色名称"
            clearable
            @keyup.enter="queryRoleTable"
            style="width: 200px"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="queryRoleTable"
            ><ElSvgIcon a-icon-name="el-icon-search" :aSize="15"/>&nbsp;搜索</el-button
          >
          <el-button @click="resetQuery"><el-icon-refresh style="width: 1em; height: 1em; margin-right: 3px"/>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>
<script setup lang='ts'>
import {TypeRoleQueryI} from '@/api/role/role_types'
import { PropType, ref } from 'vue';
import {$bus} from '@/event_bus/event_bus_index'
import { NslUtil4Vue } from '@/utils/NslUtil4Vue';
import { ElForm } from 'element-plus';
import ElSvgIcon from '@/components/el-svg-icon/el_svg_icon_index.vue';

    ////#region defineXxx
    //defineOptions({
        //name:
    //});

    //const props=defineProps({
        //propA:{
            //type:String,
            //required:true
        //},
        //propB:{
            //type:Number,
            //default:1
        //},
        //propC:{
            //type:String as PropType<MyType>,
            //required:true
        //},
    //});

    //const emit = defineEmits<{
        //event1:[para1:number,para2:string],
        //event2:[para1:number,para2:string],
    //}>();
    ////#endregion
const queryParamsModel = defineModel({ 
    type: Object as PropType<TypeRoleQueryI>, 
    required:true
});

const queryFormInit:TypeRoleQueryI={
  keywords:undefined,
  pageNum:1,
  pageSize:10
}

const queryFormRef=NslUtil4Vue.componentRef(ElForm);

function queryRoleTable(){
  $bus.emit('role-table-query');
}

function resetQuery(){
  queryFormRef.value?.resetFields();
  queryParamsModel.value=Object.assign({},queryFormInit);
  $bus.emit('role-table-query');
}
    
</script>
<style lang='scss' scoped>
    
</style>